<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>舱次列表管理</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <style>
        [v-cloak] {
            display: none;
        }

        .expend-cabin-wrapper>span {
            display: inline-block;
            font-size: 14px;
        }

        .aui-btn-info.add-cabin-info-btn {
            position: fixed;
            right: 10px;
            top: 100px;
            z-index: 100;
        }

        .cabin-info {
            position: fixed;
            top: 100px;
            left: 0;
            z-index: 1000;
            height: 100vh;
            width: 100%;
            background-color: rgba(255, 255, 255, 1);
            padding-top: 170px;
        }

        .add-cabin-info {
            width: 100%;
        }

        .aui-btn-sm {
            width: 300px;
            margin: 20px auto;
        }

        .aui-list-item.aui-list-item-middle {
            width: 85%;
            margin: 0 auto;
            border-radius: 10px;
            -moz-box-shadow: 1px 4px 20px #C2C2C2;
            -webkit-box-shadow: 1px 4px 20px #C2C2C2;
            box-shadow: 1px 4px 20px #C2C2C2;
            margin-top: 20px;
        }

        .aui-list-item h3 {
            text-align: center
        }

        .aui-list-item-text {
            margin-top: 5px;
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .aui-list-item-text>span {
            color: #84c1ff;
            font-size: 14px;
            flex: 1;
            display: block;
            height: 23px;
            line-height: 23px;
        }

        .aui-btn-sm {
            width: 300px;
            margin: 20px auto;
        }

        .aui-card-list-content {
            background-color: #f5f5f5;
            outline: none;
            border: none;
            border: 0;
        }

        .text-header {
            width: 95%;
            font-size: 30px;
            font-weight: bold;
            margin: 44px auto 0;
            margin: 30px 0;
            padding-left: 30px;
        }

        .text-body {
            width: 95%;
            margin: 0 auto;
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .text-body>div:nth-child(1) {
            width: 80%;
            padding-left: 30px;
        }

        .text-body>div:nth-child(2) {
            width: 20%;
            color: #24ca29;
        }

        .text-body>div>p:nth-child(1) {
            color: #000;
        }

        .text-body>div>p:nth-child(2) {
            font-size: 17px;
            color: #777;
        }

        .aui-list-img-sm {
            width: 50px;
            height: 100px;
            border-radius: 50%;
        }

        .aui-list.aui-media-list::before {
            display: none !important;
        }

        .aui-form-list {
            position: relative;
        }

        .aui-list-item-form {
            position: absolute;
            width: 60%;
            left: 50%;
            transform: translateX(-50%);
        }

        .aui-list-cender {
            width: 54%;
        }

        .aui-list-cender span {
            padding-right: 30%;
            width: 100%
        }
    </style>
</head>

<body>
    <main id="app">
        <header id="header" class="aui-bar aui-bar-nav">
            <a class="aui-pull-left aui-btn" onclick="closewin()">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
            <div class="aui-title">氧舱治疗</div>
        </header>

        <div class="text-header">
            治疗次数
        </div>
        <div class="text-body">
            <div>
                <!-- <p>本年度累计开仓：<strong id="KCCS"></strong>次</p> -->
                <p>当日已排仓：<strong id="YPC"></strong>人<span style="padding-left:40px;">未排仓：<strong
                            id="DPC"></strong>人</span></p>
                <p>暂停治疗：<strong id="YZD"></strong>人<span style="padding-left:50px;">长期失约：<strong
                            id="CQSY"></strong>人</span></p>
                <div v-for="(State, index) in CabinState">
                    <p><strong v-if="State.F_RemindInspect"
                            style="color:#FF2D2D">待核查舱次提醒：{{State.F_bianhao}}。&nbsp;&nbsp;</strong></p>
                </div>
            </div>
            <div>
                详细信息
            </div>
        </div>

        <div class="aui-card-list">
            <div class="aui-card-list-content">
                <ul class="aui-list aui-media-list">
                    <li @click="enterUsersFrame(item.F_id)" class="aui-list-item aui-list-item-middle"
                        v-for="(item, index) in Cabinlist">
                        <h3>{{item.F_Cabin_IDName}}</h3>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media" @click.prevent.stop="Cabin_Record_Frame(item.F_id)">
                                <img src="../image/avatar.jpg" class="aui-img-round aui-list-img-sm">
                                <div v-if="item.countSR!==0" class="aui-badge">{{item.countSR}}人</div>
                                <div v-else class="aui-badge" style="background-color:#4169E1">{{item.countSR}}人</div>
                            </div>
                            <div class="aui-list-item-inner aui-list-item-arrow">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title aui-font-size-14">舱次编号：{{item.F_bianhao}}</div>
                                    <div class="aui-list-item-title aui-font-size-14" style="padding-right: 50px;">治疗压力:
                                        {{item.F_yali}}</div>
                                </div>
                                <div class="aui-list-item-text">
                                    <span>升压时间：{{item.F_jiayaTime}}</span>
                                    <span>稳压时间：{{item.F_wenyaTime}}</span>
                                </div>
                                <div class="aui-list-item-text">
                                    <span>减压时间：{{item.F_jianyaTime}}</span>
                                    <span>出舱时间：{{item.F_chucangTime}}</span>
                                </div>
                                <div class="aui-list-item-text">
                                    <span class="aui-iconfont aui-icon-pencil aui-font-size-14" v-if="item.countSR!==0"
                                        @click.prevent.stop="editCabinEvent(item.F_id,item.F_Cabin_ID)"
                                        style="color:#4169E1">操舱执行</span>
                                    <span class="aui-iconfont aui-icon-pencil aui-font-size-14" v-else
                                        style="color:#4169E1">操舱执行</span>
                                    <!-- <span class="aui-iconfont aui-icon-edit aui-font-size-14" style="color:#4169E1">编辑</span> -->
                                    <span class="aui-iconfont aui-icon-edit aui-font-size-14"
                                        @click.prevent.stop="DoctorCheckFrame(item.F_id)"
                                        style="color:#4169E1">医师核查</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="aui-btn aui-btn-info add-cabin-info-btn" onclick="addCabinInfo()"><span
                class="aui-iconfont aui-icon-plus"></span>添加舱次</div>

        <div class="cabin-info" id="cabin-info" v-if="cabinStatus" @touchmove.prevent>
            <div class="aui-content aui-margin-b-15">
                <ul class="aui-list aui-form-list">

                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                舱次名称
                            </div>
                            <div class="aui-list-item-input">
                                <input style="padding-left:30%" type="text" placeholder="舱次名称" id="cf_name">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                所属舱室
                            </div>
                            <div class="aui-list-item-input">
                                <input style="padding-left:30%" type="text" placeholder="所属舱室" id="cf_ci_id">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                升压时间
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" style="padding-left:30%" id="cf_compression" placeholder="升压时间">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                稳压时间
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" style="padding-left:30%" id="cf_stable_Pressure" placeholder="稳压时间">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                减压时间
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" style="padding-left:30%" id="cf_decompression" placeholder="减压时间">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                出舱时间
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" style="padding-left:30%" id="cf_out_cabin" placeholder="出舱时间">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                治疗压力
                            </div>
                            <div class="aui-list-item-input">
                                <input style="padding-left:30%" type="text" placeholder="治疗压力" id="cf_pressure">
                            </div>
                        </div>
                    </li>
                </ul>
                <p class="add-cabin-info">
                    <div class="aui-bar aui-bar-btn aui-bar-btn-round aui-btn-sm" style="width:45%;">
                        <div class="aui-bar-btn-item aui-active" onclick="Cancel()">取消</div>
                        <div class="aui-bar-btn-item" onclick="insertHoCabinFrequency()">添加</div>
                    </div>
                </p>
            </div>
        </div>

    </main>
</body>

</html>

<script src="../script/api.js" charset="utf-8" type="text/javascript"></script>
<script src="../script/vue.js" charset="utf-8" type="text/javascript"></script>
<script src="../js/jquery.min.js" charset="utf-8" type="text/javascript"></script>
<script src="../js/ToConfigure.js" charset="utf-8" type="text/javascript"></script>
<script src="../script/aui-toast.js" charset="utf-8" type="text/javascript"></script>
<script src="../script/aui-dialog.js" charset="utf-8" type="text/javascript"></script>
<script src="../script/aui-tab.js" charset="utf-8" type="text/javascript"></script>
<script type="text/javascript">
    var vm = null;
    apiready = function () {
        api.addEventListener({
            name: 'canbin'
        }, function (ret, err) {
            if (ret.value.state == 'no') {
                reloadCanbin();
            }
        });

        vm = new Vue({
            el: '#app',
            data: {
                cabinStatus: false,
                // jianyaDateTime: '选择时间',
                // wenyaDateTime: '选择时间',
                // chucangDateTime: '选择时间',
                // jianyaDateTime: '选择时间',
                // highDateTime: '选择时间',
                Cabinlist: [], //舱次信息
                CabinState: [], //舱次提醒核查状态
                CabinInformation: [], //舱室信息
                Url_IP: ""
            },
            created() {

                //获取所属医院IP地址
                this.Url_IP = ToConfigure_IP("Gorgeous");

                //查询舱次信息
                Query_HO_CabinInformation();
                //查询提醒核查状态
                Query_CabinState();
                api.ajax({
                    url: this.Url_IP + 'HyperbaricOxygen/DeviceManagement/Query_OxygenChamber',
                    method: 'post',
                    data: {
                        values: {
                            parms: ""
                        }
                    },
                }, function (ret, err) {
                    if (ret) {
                        vm.CabinInformation = ret;
                    } else {
                        var toast = new auiToast();
                        toast.fail({
                            title: "暂无舱次信息",
                            duration: 2000
                        });
                    }
                });
            },
            methods: {
                enterPersonPage: function (item) {
                    api.openWin({
                        name: 'personInfo',
                        url: './person-info.html',
                        pageParam: {
                            name: 'personInfo'
                        }
                    });
                },
                enterUsersFrame: function (F_id) {
                    api.openWin({
                        name: 'patient',
                        url: './patient.html',
                        pageParam: {
                            F_id: F_id
                        }
                    });
                },
                editCabinEvent: function (F_id, F_Cabin_ID) {
                    api.openWin({
                        name: 'patient-info-header',
                        url: './patient-info-header.html',
                        pageParam: {
                            F_id: F_id,
                            F_Cabin_ID: F_Cabin_ID
                        }
                    });
                },
                DoctorCheckFrame: function (F_id) {
                    api.openWin({
                        name: 'DoctorCheck-header',
                        url: './DoctorCheck-header.html',
                        pageParam: {
                            F_id: F_id
                        }
                    });
                },
                Cabin_Record_Frame: function (F_id) {
                    api.openWin({
                        name: 'Cabin_Record-header',
                        url: './Cabin_Record-header.html',
                        pageParam: {
                            F_id: F_id
                        }
                    });
                }
            }
        })

        var header = $api.byId('header'); // 获取头部
        $api.fixStatusBar(header); // 处理ios兼容
    }

    //查询舱次信息
    function Query_HO_CabinInformation() {
        //获取所属医院IP地址
        var Url_IP = ToConfigure_IP("Gorgeous");
        api.ajax({
            url: Url_IP + 'HyperbaricOxygen/CabinTreatment/Query_HO_CabinInformation',
            method: 'post',
            data: {
                values: {
                    parms: ""
                }
            },
        }, function (ret, err) {
            if (ret) {
                vm.Cabinlist = ret;
            } else {
                var toast = new auiToast();
                toast.fail({
                    title: "暂无舱次信息",
                    duration: 2000
                });
            }
        });
    }

    function Query_CabinState() {
        //获取所属医院IP地址
        var Url_IP = ToConfigure_IP("Gorgeous");
        var Query_JsParms = new Object();
        Query_JsParms.F_RemindInspect = "1";
        var JsonStr = JSON.stringify(Query_JsParms);
        api.ajax({
            url: Url_IP + 'HyperbaricOxygen/CabinTreatment/Query_CabinState',
            method: 'get',
            data: {
                values: {
                    parms: JsonStr
                }
            },
        }, function (ret, err) {
            if (ret) {
                if (ret) {
                    vm.CabinState = ret;
                } else {

                }
            }
        });
    }

    function closewin() {
        api.closeWin({
            name: 'enterCabinPage'
        });
    }

    function addCabinInfo() {
        vm.cabinStatus = true
    }

    //取消按钮
    function Cancel() {
        vm.cabinStatus = false;
    }

    /**
     * 添加舱次信息
     */
    function insertHoCabinFrequency() {
        /**
         * 获取参数
         */
        var jsonStr = GetParameters();
        //获取所属医院IP地址
        var Url_IP = ToConfigure_IP("Gorgeous");

        /**
         * 验证参数是否为空
         */
        if (jsonStr) {
            /**
             * 请求控制器
             */
            $.ajax({
                url: Url_IP + '/disinfectioninspection/hocabinfrequency/insertHoCabinFrequency',
                type: 'post',
                contentType: "application/json",
                dataType: "json",
                data: jsonStr,
                success: function (result) {
                    /**
                     * 验证是否成功
                     */
                    if (result.success == true) {

                        toast.success({
                            title: "提交成功",
                            duration: 2000
                        });

                        api.openFrame({ // 打开Frame
                            name: 'cabin',
                            url: 'cabin.html',
                        });

                    } else {
                        /**
                         *  提示错误信息
                         */
                        toast.fail({
                            title: "提交失败",
                            duration: 2000
                        });
                    }
                },
                error: function (result) {
                    /**
                     *  提示错误信息
                     */
                    toast.fail({
                        title: "提交失败",
                        duration: 2000
                    });
                }
            });
        }
    }
    //获取添加舱室信息
    function GetParameters() {
        var JsParms = new Object();
        //舱次名称
        JsParms.cf_name = document.getElementById("cf_name").value;
        //舱室
        JsParms.cf_ci_id = document.getElementById("cf_ci_id").value;
        //加压时间
        JsParms.cf_compression = document.getElementById("cf_compression").value;
        //减压时间
        JsParms.cf_decompression = document.getElementById("cf_decompression").value;
        //稳压时间
        JsParms.cf_stable_Pressure = document.getElementById("cf_stable_Pressure").value;
        //出舱时间
        JsParms.cf_out_cabin = document.getElementById("cf_out_cabin").value;
        //压力
        JsParms.cf_pressure = document.getElementById("cf_pressure").value;

        return JSON.stringify(JsParms);
    }



    //调用刷新当前页面
    function reloadCanbin() {
        window.location.reload();
    }

</script>